<template>
  <div class="header">
      <van-row gutter="10">
        <van-col span="11">
          <div class="content">
           <!--图标-->
            <img src="../assets/logo.png" alt="" width="35" height="35" class="imgs">
            <div style="width: 70%; padding-top: 5px;">
              <div style="font-size: 13px; color: white; font-weight: 700;">AI智能车评服务</div>
              <span style="font-size: 10px; color: #999999;">选车二手车精选</span>
            </div>
          </div>
        
        </van-col>
        <van-col span="7">
          <van-icon name="search" color="white" size="30px" class="icon" @click="onSearchs"/>
        </van-col>
        <van-col span="6">
          <div class="openapp" @click="openApp">
            <span style="font-size: 13px; font-weight: 600; padding-left: 15px;">打开APP</span><br></br>
            <span style="font-size: 10px; color: #999999; padding-left: 5px;">13亿人正在使用</span>
          </div>
        </van-col>
      </van-row>
  </div>

  <!--标签导航栏-->
  <van-tabs v-model:active="actives">
  <van-tab v-for="(item,index) in tabData" :key="item.id" :title="item.name">
    <component :is="item.component"></component>
  </van-tab>
</van-tabs>
<!-- 点击图标弹出对应的框-->
<van-icon name="bars" size="40px" @Click="showPopup" class="icons"/>

<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '80%' }"
>
<h3 style="text-align: center;">全部频道</h3>
<!-- 加载标签名字 -->
 <van-grid  :column-num="3" :border="false">
  <van-grid-item v-for="value in tabData" :key="value" >
    <!-- 点击按钮跳转到对应的页面 -->

    <van-button type="default" size="normal" @click="onClick(value.id)">
      {{ value.name }}
    </van-button>
  </van-grid-item>
</van-grid>
</van-popup>



    <!--v-model 是vue中的指令 叫 双向数据绑定 数据库发生改变 页面发生改变  页面发生改变 数据也会发生改变-->
  <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
  <van-tabbar-item icon="smile-comment-o" to="catfrend">车友圈</van-tabbar-item>
  <van-tabbar-item icon="desktop-o" to="newcat">选车</van-tabbar-item>
  <van-tabbar-item icon="logistics" to="persche">二手车</van-tabbar-item>
   <van-tabbar-item icon="contact" url="https://chat.deepseek.com/">服务</van-tabbar-item>
</van-tabbar>
</template>

<script setup>
// 编写js代码逻辑的地方
import { ref  } from 'vue'
//引入标签栏的组件
import Local from '../components/tabview/Local.vue'
import Lookvidecat from '../components/tabview/Lookvidecat.vue'
import Newcar from '../components/tabview/NewCat.vue'
import Original from '../components/tabview/Original.vue'
import Selected from '../components/tabview/Selected.vue'
import Shopping from '../components/tabview/Shopping.vue'

// var active = ref(0)
// let active = ref(0)
const active = ref(0)
// 第一步 引入router
import { useRouter } from 'vue-router'
const router = useRouter() // 创建路由对象

const tabData =ref([
  {id: 101,name: '精选',component: Selected},
  {id: 102,name: '新车',component: Newcar},
  {id: 103,name: '本地',component: Local},
  {id: 104,name: '原创',component: Original},
  {id: 105,name: '视频看车',component: Lookvidecat},
  {id: 106,name: '导购',component: Shopping},
  {id: 107,name: '行业',component: Shopping},
  {id: 108,name: 'suv',component: Shopping},
  {id: 109,name: '新能源',component: Shopping},

])
//标签导航栏的默认选中项
 const actives = ref(0);

//弹出框的显示与隐藏
const show = ref(false);
const showPopup = () => {
  show.value = true;
};

// 点击标签导航栏的某一个标签跳转过去 弹出框消失
const onClick = (id)=>{
  console.log(id);
  
  actives.value = id - 101; // 因为数组是从0开始的 所以要减去101
console.log(actives.value);
// 弹出框消失 关闭
  show.value = false;
}


//定义函数
const openApp = () =>{
  // alert('打开APP')
  //跳转路由
  router.push({name: 'OpenApp'})
}

//点击跳转到搜索页面
const onSearchs =()=>{
  // 根据path路径跳转的
  router.push('/searchs')
}

</script>

<style  scoped>
.header{
  width: 100%;
  height: 50px;
  background-image: url(../assets/bgheader.png);
 
  z-index: 101;
}
.content{
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.imgs{
  margin-top: 7px;
  margin-left: 10px;
}
.openapp{
  width: 85px;
  height: 38px;
  background-color: #f3aa4b;
  border-radius: 7px;
  margin-top: 5px;
}
.icon{
  margin-top: 10px;
  float: right;
}

.van-grid-item {
 padding-right: 0 !important;
 margin-top: 3px !important;
  width: 80px;
  height: 70px;

  
  .van-button{
    width: 100px !important;

  }
}
:deep(.van-button--default){
    background-color: #eceaea;
    
  }
.van-popup{
  border-radius: 7px;
}
.icons{
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 10;
  cursor: pointer;
  background-color: white;
}
</style>